<template>
  <div class="global-setting-wrapper">
    <a-form :model="previewData.globalSetting">
      <!--尺寸-->
      <Divider>
        <div class="divider">
          <span class="margin-right-xs">尺寸</span>
          <a-tooltip title="重置">
            <ReloadOutlined class="reload" @click="handleReset"></ReloadOutlined>
          </a-tooltip>
        </div>
      </Divider>
      <a-form-item class="form-item" label="宽度" name="canvasWidth">
        <a-input-number :min="0" class="w-full" v-model:value="canvasWidth" />
      </a-form-item>
      <a-form-item class="form-item" label="高度" name="canvasHeight">
        <a-input-number :min="0" class="w-full" v-model:value="canvasHeight" />
      </a-form-item>
      <!--背景-->
      <Divider>
        <div class="divider">
          <span class="margin-right-xs">背景</span>
          <a-tooltip title="默认背景">
            <ReloadOutlined class="reload" @click="handleResetBgImage"></ReloadOutlined>
          </a-tooltip>
        </div>
      </Divider>
      <a-form-item
        v-if="previewData.globalSetting.canvasBgImage"
        class="form-item"
        label="当前"
        name="canvasWidth"
      >
        <div class="flex align-center">
          <img
            style="width: 100px; display: inline"
            :src="previewData.globalSetting.canvasBgImage"
            alt=""
          />
          <div class="flex flex-direction margin-left-sm">
            <a-button size="small" @click="handleUploadBgImg">
              更换
              <template #icon>
                <UploadOutlined class="text-12"></UploadOutlined>
              </template>
            </a-button>
            <a-button size="small" danger class="margin-top-xs" @click="handleRemoveBgImg">
              移除
              <template #icon>
                <DeleteOutlined class="text-12"></DeleteOutlined>
              </template>
            </a-button>
          </div>
        </div>
      </a-form-item>
      <div v-else class="margin-lr-xs" @click="handleUploadBgImg">
        <a-button class="w-full">
          <template #icon>
            <UploadOutlined></UploadOutlined>
          </template>
          上传背景图片
        </a-button>
      </div>
      <!--配色-->
      <Divider> 配色 <span class="tips">(当无背景图时才生效)</span> </Divider>
      <a-form-item class="form-item" label="" name="color">
        <a-input
          type="color"
          class="w-full"
          v-model:value="previewData.globalSetting.canvasBgColor"
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import Divider from '@/components/Divider/index.vue'
import { useCertStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { computed, nextTick } from 'vue'
import { getPxValue, setPxValue } from '@/utils'
import { ReloadOutlined, UploadOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import BaseGlobalSetting from '@/diy/globalSetting/BaseGlobalSetting'
import { CertGlobalSetting } from '@/diy/globalSetting/CertGlobalSetting'

const store = useCertStore()
const { previewData } = storeToRefs(store)

//更新画布

const handleUpdateCanvasControl = () => {
  nextTick(() => {
    store.canvasControl?.update()
  })
}

//画布宽度
const canvasWidth = computed({
  get() {
    return getPxValue(previewData.value.globalSetting.canvasWidth)
  },
  set(value: number) {
    previewData.value.globalSetting.canvasWidth = setPxValue(value)
    handleUpdateCanvasControl()
  }
})
//画布高度
const canvasHeight = computed({
  get() {
    return getPxValue(previewData.value.globalSetting.canvasHeight)
  },
  set(value: number) {
    previewData.value.globalSetting.canvasHeight = setPxValue(value)
    handleUpdateCanvasControl()
  }
})

// 重置尺寸
const handleReset = () => {
  const { canvasWidth, canvasHeight } = new BaseGlobalSetting()
  previewData.value.globalSetting.canvasWidth = canvasWidth
  previewData.value.globalSetting.canvasHeight = canvasHeight
  handleUpdateCanvasControl()
}
//重置背景图
const handleResetBgImage = () => {
  const cert = new CertGlobalSetting()
  previewData.value.globalSetting.canvasBgImage = cert.canvasBgImage
}

//更换背景图
const handleUploadBgImg = () => {
  // todo 更换背景图
}

//移除背景图
const handleRemoveBgImg = () => {
  previewData.value.globalSetting.canvasBgImage = ''
}
</script>

<style scoped>
.global-setting-wrapper {
  .form-item {
    padding: 0 10px;
  }
  .tips {
    color: #949393;
    font-weight: 400;
    font-size: 0.85em;
  }

  .reload {
    color: #a19e9e;
    &:active {
      scale: 1.08;
    }
  }
}
</style>
